<template>
	<view class="wallet">
		<uv-navbar placeholder autoBack bgColor="#CA1C1D">
			<template v-slot:left>
				<view class="left_slot">
					<image src="@/static/images/back.png"></image>
				</view>
			</template>
			<template v-slot:center>
				<view class="nav_title">我的钱包</view>
			</template>
		</uv-navbar>
		<view class="header">
			<view class="top">
				<view class="left">
					<view class="left_view">
						<view class="text">我的资产</view>
						<image src="@/static/images/m29.png"></image>
						<!-- <image src="@/static/images/m28.png"></image> -->
					</view>
				</view>
				<view class="right">
					<view class="btn" @click="router('/pages/my/give_money')">转账</view>
					<view class="btn" @click="router('/pages/my/extract')">提现</view>
				</view>
			</view>
			<view class="bottom">
				<view class="cell">
					<view class="name">余额</view>
					<view class="cell_item">
						<view class="unit">￥</view>
						<view class="value">{{user_info.balance}}</view>
					</view>
				</view>
				<view class="cell">
					<view class="name">积分</view>
					<view class="cell_item">
						<view class="value">{{user_info.integral}}</view>
					</view>
				</view>
				<view class="cell">
					<view class="name">优惠券</view>
					<view class="cell_item">
						<view class="value">--</view>
						<!-- <view class="unit">张</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="title">余额明细</view>
			<view class="item" v-for="item in _this.list">
				<view class="info">
					<view class="name">{{item.type_name}}</view>
					<view class="time">{{item.created_at}}</view>
				</view>
				<view class="right">
					<view class="price">{{item.value}}</view>
					<view class="balance">余额：{{item.after}}</view>
				</view>
			</view>
		</view>
		<uv-load-more :status="_this.loadmore_status" line @loadmore="loadmore" />
	</view>
</template>

<script setup>
	import {
		userInfo,
		userLog
	} from "@/request/api";
	import useBase from "@/hooks/useBase.js";
	import useList from "@/hooks/useList.js";
	const {
		router
	} = useBase();
	const {
		_this
	} = useList();
	import {
		onShow,
		onHide,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		ref
	} from "vue";

	const user_info = ref({
		balance: "",
		integral: "",
	});
	const getList = async () => {
		let {
			list,
			balance,
			integral
		} = await userLog({
			field: "balance",
			page: _this.page,
			limit: _this.limit
		});
		user_info.value.balance = balance;
		user_info.value.integral = integral;

		_this.last_page = list.last_page;
		list = list.list;
		_this.list = _this.page == 1 ? list : [..._this.list, ...list];
		_this.loadmore_status = _this.last_page == _this.page ? 'nomore' : 'loadmore';
	};
	const loadmore = () => {
		if (_this.page >= _this.last_page) return;
		_this.page++;
		getList();
	};
	onShow(() => getList());
	onShow(() => _this.page = 1);
	onReachBottom(() => loadmore());
</script>

<style scoped lang="scss">
	.wallet {
		min-height: calc(100vh - var(--window-top) - var(--window-bottom));
		padding: 0rpx 25rpx;
		box-sizing: border-box;
		background-color: #f5f5f5;
		overflow: hidden;

		.left_slot {
			image {
				width: 43rpx;
				height: 36rpx;
			}
		}

		.nav_title {
			color: #F5F5F5;
			font-size: 36rpx;
		}

		.header {
			width: 100%;
			height: 300rpx;
			margin: 25rpx 0 30rpx;
			padding: 30rpx 30rpx 46rpx 30rpx;
			box-sizing: border-box;
			background: url(@/static/images/bg4.png) no-repeat;
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.top {
				height: 60rpx;
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: flex-end;

					.left_view {
						display: flex;
						align-items: center;

						.text {
							color: #EAE9EF;
							font-size: 32rpx;
							font-weight: bold;
							padding-right: 20rpx;
							box-sizing: border-box;
						}

						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}

				.right {
					display: flex;

					.btn {
						width: 120rpx;
						height: 52rpx;
						color: #FFFFFF;
						font-size: 24rpx;
						border-radius: 10rpx;
						margin-left: 30rpx;
						border: 2rpx solid #FFFFFF;
						box-sizing: border-box;
						display: flex;
						justify-content: center;
						align-items: center;

						&:first-child {
							margin-left: 0;
						}
					}
				}
			}

			.bottom {
				display: flex;
				justify-content: space-between;

				.cell {
					display: flex;
					flex-direction: column;
					align-items: center;

					.name {
						color: #FFFFFF;
						font-size: 26rpx;
						padding-bottom: 35rpx;
						box-sizing: border-box;
					}

					.cell_item {
						display: flex;
						align-items: flex-end;

						.unit {
							color: #FFFFFF;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: bold;
						}

						.value {
							color: #FFFFFF;
							font-size: 40rpx;
							font-weight: bold;
						}
					}
				}

			}
		}

		.list {
			border-radius: 20rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			overflow: hidden;

			.title {
				height: 90rpx;
				line-height: 90rpx;
				color: #333333;
				font-size: 30rpx;
				font-weight: bold;
			}

			.item {
				height: 120rpx;
				border-bottom: 1px solid #EEEEEE;
				padding: 26rpx 0 20rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				.info {
					height: 100%;
					width: 250rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.name {
						color: #333333;
						font-size: 28rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.time {
						color: #999999;
						font-size: 22rpx;
					}
				}

				.right {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.price {
						color: #333333;
						font-size: 36rpx;
						font-weight: bold;
					}

					.balance {
						color: #999999;
						font-size: 22rpx;
						text-align: right;
					}
				}
			}
		}
	}
</style>